<template>
    <view class="content my">
	    <view class="userDiv">
			<uni-list>
				<uni-list-chat 
					:avatar="$getHead(userPhoto)" 
					:title="userName" 
					:note="orgName" 
					:desc="postName"
					clickable
					to="/pages/my/user"
				>
				</uni-list-chat>
			</uni-list>
			
			<!-- <view class="qrCode">
				<image src="../../static/qrcode.png"/>
			</view>
			<view class="title">{{userName}}</view> -->
		</view>
        <view>
            <uni-list>
				<!-- <uni-list-item :show-extra-icon="true" :extra-icon="userIcon" title="个人信息" @click="viewUser"/>
                <uni-list-item :show-extra-icon="true" :extra-icon="setIcon" title="设置" @click="viewSet"/>
				 -->
				 
				<uni-list-item :show-extra-icon="true" :extra-icon="cacheIcon" title="清除缓存" :rightText="cacheSize" @click="clearCache"/>
				<uni-list-item :show-extra-icon="true" :extra-icon="pwdIcon" title="修改密码" @click="updatePwd"/>
				<uni-list-item :show-extra-icon="true" :extra-icon="aboutIcon" title="关于" @click="about"/>
				<uni-list-item :show-extra-icon="true" :extra-icon="helpIcon" title="帮助" @click="help"/>
				<uni-list-item :show-extra-icon="true" :extra-icon="opinionIcon" title="意见反馈" @click="feedback"/>
            </uni-list>
        </view>
        <view class="btnDiv">
            <button class="landing" type="warn" @click="logout">退出当前账号</button>
        </view>
    </view>
</template>

<script>
	import uniListChat from '@/components/uni-list-chat/uni-list-chat.vue'
	import { business } from '@/utils/common.js'
	import { getUserInfoByName } from '@/api/common.js'
	
	export default {
		components: {
			uniListChat
		},
		data() {
			return {
				orgName: '',
				postName: '',
				cacheIcon: {
					color: '#007aff',
					size: '22',
					type: 'trash'
				},
				pwdIcon: {
					color: '#007aff',
					size: '22',
					type: 'locked'
				},
				aboutIcon: {
					color: '#007aff',
					size: '22',
					type: 'info'
				},
				helpIcon: {
					color: '#007aff',
					size: '22',
					type: 'help'
				},
				opinionIcon: {
					color: '#007aff',
					size: '22',
					type: 'compose'
				}
			}
		},
		computed: {
			userPhoto() {
			    return this.$store.getters["user/userPhoto"]
			},
			userName() {
				return this.$store.getters["user/name"]
			},
			cacheSize() {
				let size = 0
				uni.getStorageInfo({
					success: function (res) {
						size = res.currentSize+'KB'
					}
				})
				return size
			}
		},
		onLoad() {
			this.init()
		},
		onShow() {	
			business.refreshMsgCount()
		},
		methods: {
			init() {
				let account = this.$store.getters["user/account"]
				getUserInfoByName(account).then(res=>{
					this.orgName = res.data.org.name
					const posts = []
					res.data.positions.forEach(item=>{
						posts.push(item.name)
					})
					this.postName = posts.join()
				})
			},
			viewUser() {
				uni.navigateTo({
					url: '/pages/my/user'
				})
			},
			viewSet() {
				uni.navigateTo({
					url: '/pages/my/set'
				})
			},
			logout(){
				uni.showModal({
					title: '提示',
					content: '您确定要退出当前账号吗？',
					success: function (res) {
						if (res.confirm) {
							uni.clearStorage();
							uni.reLaunch({
								url: '/pages/login/index'
							});
						}
					}
				})
			},
			clearCache() {
				uni.showModal({
					title: '提示',
					content: '您确定要清除缓存吗？',
					success: function (res) {
						if (res.confirm) {
							uni.clearStorage()
							setTimeout(function(){
								uni.reLaunch({
									url: '/pages/login/index'
								});
							},2000)
						}
					}
				})
			},
			updatePwd(){
				uni.navigateTo({
					url: '/pages/my/update'
				})
			},
			about() {
				
			},
			help() {
				
			},
			feedback() {
				
			}
		}
	}
</script>

<style lang="scss">
    .my{
       .title{
           text-align: center;
           color: #666;
           font-size: $uni-font-size-base;
		   padding-top: 20rpx;
       }
        .subtitle{
            text-align: center;
            color: #666;
            font-size: $uni-font-size-base;
            margin-top: 16rpx;
        }
    }
	
	.userDiv{
		background-color: #F4F5F6;
		padding: 20rpx 0; 
	}
	
	.user-name {
		font-size: 20px; 
		margin-top: 10px;
	}
	
	.desc-class {
		font-size: 20px;
	}
	
	.qrCode {
		text-align: center;
	}
	
	.qrCode image {
		height: 120px;
		width: 120px;
	}
	
	.uni-list{
		border-bottom: 1px solid #F0F0F0;
	}
	
	.btnDiv {
	  padding: 10rpx 20rpx;
	  margin-top: 40rpx;
	}
</style>
